<head th:fragment="header" xmlns:th="http://www.w3.org/1999/xhtml">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <!-- Bootstrap v3.3.7  -->
    <link th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/assets/css/font-awesome.min.css}" rel="stylesheet"/>

    <link th:href="@{/assets/css/style.css}" rel="stylesheet"/>
</head>
<div th:fragment="navigation">
    <nav class="navbar navbar-inverse">
        <!-- Brand and toggle get grouped for better mobile display -->

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="container">
            <div class="container collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li th:class="${id==null} ? 'active' : '' "><a th:href="${'/front'}">首页</a></li>
                    <li th:class="${id == cate.id}? 'active' : '' " th:each="cate : ${nav_categories}">
                        <a th:if="(${cate.module}!=null)" th:utext="${cate.name}"
                           th:href="${'/front/category/'+cate.id}"></a>
                        <a th:if="(${cate.module}==null  and ${cate.href}!=null)" th:utext="${cate.name}"
                           th:href="${cate.href}" th:target="(${cate.target}!=null) ? ${cate.target} : '#'"></a>
                    </li>
                </ul>

            </div>
        </div>
    </nav>
</div>

<div th:fragment="footer">
    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <script th:src="@{/assets/js/bootstrap.min.js}"></script>

</div>
<div th:fragment="datetime(now0)">
<style>
    /* *{padding: 0; margin: 0; font-family: "Lato", sans-serif} */
    /* i{font-size: 14px} */
    /* body{} */
    .lrwdt {color: #ffffff; text-align: center; padding-top: 5px;}
    .lrwdt span{display: inline-block; min-width: 50px; height: 40px;padding:2px 10px; border-radius: 5px}
    .lrwdt p{font-size: 25px}
    .lrwdt span.red{background: #ff0030}
    .lrwdt span.yg{background: yellowgreen}
    .lrwdt span.or{background: orange}
    .lrwdt span.pi{background: palevioletred}
    .lrwdt span.pk{background: #00a0e9}
    .lrwdt span.mk{background: #1FADC5}
    .lrwdt span.mo{background: #ff1493}
/*     .lrwdt span p:first-child{font-size: 25px}
    .lrwdt span p:last-child{font-size: 14px} */
</style>
<div class="lrwdt">
        <span class="red">
            <p id="y4"></p>
        </span>
        <span class="mo">
            <p id="m4"></p>
        </span>
        <span class="yg">
            <p id="d4"></p>
        </span>
        <span class="or">
            <p id="h4"></p>
        </span>
        <span class="pi">
            <p id="i4"></p>
        </span>
        <span class="pk">
            <p id="s4"></p>
        </span>
    </div>
    

</div>
<div th:fragment="countdown">
<style>
    .lrwdt {color: #ffffff; text-align: center; padding-top: 5px;/* float:left; */}
    .lrwdt span{display: inline-block; min-width: 50px; height: 40px;padding:2px 10px; border-radius: 5px}
    .lrwdt p{font-size: 25px;/* margin-top: 10px; */}
    .lrwdt span.red{background: #ff0030}
    .lrwdt span.yg{background: yellowgreen}
    .lrwdt span.mo{background: #ff1493}
</style>
<div class="lrwdt">
    <span class="yg">
        <p id="h4"></p>
    </span>
    <span class="mo">
        <p id="i4"></p>
    </span>
    <span class="red">
        <p id="s4"></p>
    </span>
</div>

</div>
